<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import type { ComponentSize } from 'element-plus'
import { adminApplyCommodity, authCommodity, refuseCommodity } from '../assets/net/NetUtils';
import { CommodityModel } from '../assets/model/Commodity';


const fill = ref<boolean>(true);
let isEmpty = ref<boolean>(true)
const size = ref<ComponentSize>('default')
const commodities = ref<Array<CommodityModel>>()
onMounted(() => {
    adminApplyCommodity()
        .then((value) => {
            commodities.value = value.data;
            if (value.data.length === 0) {
                isEmpty.value = true;
            } else {
                isEmpty.value = false;
            }
        })
})

const authCommodityClick = (id: number) => {
    authCommodity(id)
        .then(() => {
            adminApplyCommodity()
                .then((value) => {
                    commodities.value = value.data;
                    isEmpty.value = value.data.length === 0 ? true : false;
                })
        })
}

const refuseCommodityClick = (id: number) => {
    refuseCommodity(id)
        .then(() => {
            adminApplyCommodity()
                .then((value) => {
                    commodities.value = value.data;
                    isEmpty.value = value.data.length === 0 ? true : false;
                })
        })
}
</script>

<template>
    <el-scrollbar height="100%" style="overflow-y: hidden;">
        <el-space wrap :size="size" :fill="fill" v-show="!isEmpty" style="width: 100%;">
            <div v-for="i in commodities" :key="i.gid">
                <el-card shadow="hover" style="height: auto;">
                    <el-row style="width: 100%;" align="middel">
                        <el-col :span="4">
                            <el-image :src="`/api/image/${i.image?.url}`"></el-image>
                        </el-col>
                        <el-col :span="16">
                            <el-row>
                                <el-col :span="24">
                                    <el-text style="font-size: large;font-weight: bold;">
                                        {{ i.commodityName }}
                                    </el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-text>
                                        申请人：{{ i.user?.username }}
                                    </el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-text>
                                        商品描述：{{ i.description }}
                                    </el-text>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="4">
                            <el-row>
                                <el-col :span="24">
                                    <el-button type="danger" plain style="width: 100%;padding: 3%;"
                                        @click="refuseCommodityClick(i.gid!)">驳回申请</el-button>
                                </el-col>
                                <el-col :span="24" style="margin-top: 10%;">
                                    <el-button type="success" plain style="width: 100%;padding: 3%;"
                                        @click="authCommodityClick(i.gid!)">同意申请</el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
        <el-empty v-show="isEmpty" style="width: 100%;height: 100%;" description="这里还没有待审核的商品哦～" />
    </el-scrollbar>
</template>